<!-- 积分活动模板 -->
<template>
  <view class="sign uno-bg-white uno-border-rd-lg uno-mt2 uno-mb2 uno-p2 ">
    <view class="uno-flex uno-justify-between uno-font-bold uno-pt-2 uno-pb-2">
      <view style="font-size: 30rpx;">
        <text>每日签到</text>
        <text class="uno-color-red">+500</text>
        <text>积分</text>
      </view>
      <view @click="">
        <text>积分账单></text>
      </view>
    </view>
    <view class="sign-box uno-flex uno-flex-wrap ">
      <view class="sign-temp  uno-flex-shrink uno-p1 uno-box-border "
            :class="item.signTempClass"
            v-for="(item,index) in signList"

      >
        <view
          class="sign-temp-box uno-flex uno-justify-start uno-flex-col  uno-h-160  uno-border-rd-lg uno-p2 uno-p2  "
          :class="item.signTempBoxClass"
          @click="sign(item)"
        >
          <view>第{{ item.chiDay }}天</view>
          <view class="sign-coin uno-p2 uno-b2">
            <up-avatar :src="item.avatar"
                       :size="item.avatarSize"></up-avatar>
          </view>
          <view class="sign-desc "> {{ item.desc }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';
  import { computed, onMounted, reactive, unref } from 'vue';
  import { useSign } from '@/sheep/hooks/useSign';

  const setting = computed(() => sheep.$store('category').pages.user);
  const { signData, onSign, getSignInfo, getSignConfigList } = useSign();
  const sign = async (item) => {
    if (!item.canSign) {
      return;
    }
    if (signData.signInfo.todaySignIn) {
      uni.showToast({
        title: '今日已签到,请明日再来',
        icon: 'none',
        mask: true,
      });
      return;
    }

    await onSign();
  };


  const signList = computed(() => {
    const _signData = unref(signData);

    if (_signData && _signData.signConfigList && _signData.signInfo) {
      console.log(_signData);
      const { coin7, coin } = unref(setting);
      // console.log(  unref(_signData.signInfo),'_signData.signInfo');
      const { continuousDay, todaySignIn, totalDay } = _signData.signInfo;
      console.log('continuousDay', continuousDay);
      return _signData.signConfigList.map((item, index) => {
        item.isLastDay = item.day === signData.maxDay;
        item.hasSign = continuousDay > index;
        item.canSign = continuousDay === index;
        item.signTempClass = [item.isLastDay ? 'sevenDay' : 'otherDay'];
        item.signTempBoxClass = [item.isLastDay ? 'uno-items-flex' : 'uno-items-center',
          item.hasSign ? 'signed' : 'signing',
        ];
        item.chiDay = signDays[item.day - 1];
        item.avatar = item.isLastDay ? coin7 : coin;
        item.avatarSize = item.isLastDay ? '100rpx' : '60rpx';
        item.desc = item.hasSign ? '已签到' : item.isLastDay ? '会员分大礼包' : `${item.point}会员分`;
        return item;
      });
    }
    return [];

  });
  const init = async () => {
    await getSignInfo();
    await getSignConfigList();
  };
  onMounted(async () => {
    await init();
  });
  const signDays = ['一', '二', '三', '四', '五', '六', '七'];
</script>
<style lang="scss" scoped>
  .signed {
    background-color: #ff1c24;
    color: #fff;

    .sign-desc {
      color: #fff !important;
    }
  }

  .signing {
    background-color: #f8f8f8;
  }

  .sign {
    &-box {
      .sign-temp {
        &.otherDay {
          flex-basis: 25%;

          .sign-coin {

          }
        }

        &.sevenDay {
          flex-basis: 50%;
          position: relative;

          .sign-coin {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }

        .sign-desc {
          color: #999;
          font-size: 22rpx;
        }
      }
    }

  }

</style>
